<template>
    <div class="mask">
        <a-form :model="formState" v-bind="layout" name="nest-messages" :validate-messages="validateMessages"
            @finish="onFinish">
            <div>
                <a-form-item name="code" label="项目编码" :rules="[{ required: true }]">
                    <a-input v-model:value="formState.code" />
                </a-form-item>

                <a-form-item name="item" label="项目名称" :rules="[{ required: true }]">
                    <a-input v-model:value="formState.item" />
                </a-form-item>
            </div>

            <div>
                <a-form-item label="项目封面" :rules="[{ required: true }]">
                    <a-form-item name="dragger" no-style>
                        <a-upload-dragger name="项目封面" action="/upload.do">
                            <p class="ant-upload-drag-icon">
                                <InboxOutlined />
                            </p>
                            <p class="ant-upload-text">点击或拖动文件上传</p>
                            <p class="ant-upload-hint">支持多次上传</p>
                        </a-upload-dragger>
                    </a-form-item>
                </a-form-item>
            </div>

            <div>
                <a-form-item label="项目简介" name="introduce">
                    <a-textarea v-model:value="formState.introduce"
                        placeholder="Autosize height with minimum and maximum number of lines"
                        :auto-size="{ minRows: 4, maxRows: 5 }" name="introduce" />
                </a-form-item>
            </div>

            <div>
                <a-form-item name="classify" label="项目分类" :rules="[{ required: true, message: 'Missing area' }]">
                    <a-select v-model:value="formState.classify" :options="areas" />
                </a-form-item>

                <a-form-item name="properties" label="建设性质" :rules="[{ required: true, message: 'Missing area' }]">
                    <a-select v-model:value="formState.properties" :options="proper" />
                </a-form-item>
            </div>

            <div>
                <a-form-item name="location" label="项目所在地" :rules="[{ required: true }]">
                    <a-input v-model:value="formState.location" />
                </a-form-item>

                <a-form-item name="inves" label="总投资" :rules="[{ required: true }]">
                    <a-input v-model:value="formState.inves" />
                </a-form-item>
            </div>

            <div>
                <a-form-item name="area" label="总面积" :rules="[{ required: true }]">
                    <a-input v-model:value="formState.area" />
                </a-form-item>
            </div>

            <div>
                <a-form-item name="begin" label="开工日期" v-bind="config">
                    <a-date-picker v-model:value="formState.begin" show-time format="YYYY-MM-DD HH:mm:ss"
                        value-format="YYYY-MM-DD HH:mm:ss" />
                </a-form-item>

                <a-form-item name="end" label="竣工日期" v-bind="config">
                    <a-date-picker v-model:value="formState.end" show-time format="YYYY-MM-DD HH:mm:ss"
                        value-format="YYYY-MM-DD HH:mm:ss" />
                </a-form-item>
            </div>

            <div>
                <a-form-item name="addresser" label="联系人姓名" :rules="[{ required: true }]">
                    <a-input v-model:value="formState.addresser" />
                </a-form-item>

                <a-form-item name="phone" label="联系手机" :rules="[{ required: true }]">
                    <a-input v-model:value="formState.phone" />
                </a-form-item>
            </div>

            <div>
                <a-form-item name="state" label="项目状态" :rules="[{ required: true, message: 'Missing area' }]">
                    <a-select v-model:value="formState.state" :options="proper" />
                </a-form-item>

                <a-form-item name="clo" label="项目地址" :rules="[{ required: true }]">
                    <a-input v-model:value="formState.clo" />
                </a-form-item>
            </div>

            <hr />
            <el-button @click="update(props.pro)">保存</el-button>
            <el-button @click="hide">取消</el-button>
        </a-form>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref, watch } from 'vue';
import { UploadOutlined, InboxOutlined } from '@ant-design/icons-vue';
import service from "../../utils/service"

const layout = {
    labelCol: { span: 0 },
    wrapperCol: { span: 0 },
};

const validateMessages = {
    required: '${label} is required!',
    types: {
        email: '${label} is not a valid email!',
        number: '${label} is not a valid number!',
    },
    number: {
        range: '${label} must be between ${min} and ${max}',
    },
};

interface mydata {
    "code": number,
    "item": string,
    "img": string,
    "introduce": string,
    "classify": string,
    "properties": string,
    "location": string,
    "inves": string,
    "area": string,
    "begin": string,
    "end": string,
    "addresser": string,
    "phone": string,
    "state": string,
    "clo": string,
}

const formState = reactive<mydata>({
    "code": 0,
    "item": '',
    "img": '',
    "introduce": '',
    "classify": '',
    "properties": '',
    "location": '',
    "inves": '',
    "area": '',
    "begin": '',
    "end": '',
    "addresser": '',
    "phone": '',
    "state": '',
    "clo": '',
});
const onFinish = (values: any) => {
    console.log('Success:', values);
};

const areas = [
    {
        valuex: "房屋建设工程",
        label: "房屋建筑工程",
    },
    {
        valuex: "市政公用工程",
        label: "市政公用工程",
    },
    {
        valuex: "机电安装工程",
        label: "机电安装工程",
    },
    {
        valuex: "铁路工程",
        label: "铁路工程",
    },
    {
        valuex: "公路工程",
        label: "公路工程",
    },
    {
        valuex: "港口与航道工程",
        label: "港口与航道工程",
    },
    {
        valuex: "水利水电工程",
        label: "水利水电工程",
    },
    {
        valuex: "电子工程",
        label: "电子工程",
    },
    {
        valuex: "矿山工程",
        label: "矿山工程",
    },
    {
        valuex: "冶炼工程",
        label: "冶炼工程",
    },
    {
        valuex: "化工石油工程",
        label: "化工石油工程",
    },
    {
        valuex: "通信工程",
        label: "通信工程",
    },
    {
        valuex: "其他",
        label: "其他",
    }
];
const proper = [
    {
        valuey: "筹建",
        label: "筹建"
    },
    {
        valuey: "在建",
        label: "在建"
    },
    {
        valuey: "完工",
        label: "完工"
    },
    {
        valuey: "停工",
        label: "停工"
    },
]
// 时间
const config = {
    rules: [{ type: 'string' as const, required: true, message: 'Please select time!' }],
};



const props = defineProps<{
    pro: string;
}>();

const emit = defineEmits<{
    (e: "hide"): void;
    (e: "upmydate"): void;
}>();
const hide = () => {
    emit("hide");
};


const getform = () => {
    service({
        url: "proinfo?id=" + props.pro,
        method: "get"
    }).then((res) => {
        formState.code = res.data[0].code;
        formState.item = res.data[0].item;
        formState.classify = res.data[0].classify;
        formState.properties = res.data[0].properties;
        formState.location = res.data[0].location;
        formState.inves = res.data[0].inves;
        formState.area = res.data[0].area;
        formState.begin = res.data[0].begin;
        formState.end = res.data[0].end;
        formState.addresser = res.data[0].addresser;
        formState.phone = res.data[0].phone;
        formState.state = res.data[0].state;
        formState.clo = res.data[0].clo;
        formState.introduce = res.data[0].introduce;
        formState.img = res.data[0].img;
    })
}
getform()

const update = (id: any) => {

    getform();
    service({
        url: "proinfo/" + id,
        method: "patch",
        data: formState,
    }).then(() => {
        emit("hide");
        emit("upmydate");
    })

}

</script>

<style scoped>
.mask {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background-color: gray;
    opacity: 0.9;
    width: 100%;
    height: 100%;
    overflow: auto;
}

.mask::-webkit-scrollbar {
    display: none;
    /* Chrome Safari */
}

.ant-form {
    width: 800px;
    height: 800px;
    margin: auto;
    background-color: whitesmoke;
    position: absolute;
    top: 56%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
}

.ant-form div {
    display: flex;
}

.ant-input {
    width: 300px;
}
</style>